import * as React from "react";
import {
  Image,
  StyleSheet,
  View,
  DeviceEventEmitter,
  Dimensions,
  KeyboardAvoidingView,
  ScrollView,
  Platform
} from "react-native";
import { Input, Button, Icon } from "react-native-elements";
import { observer, inject } from "mobx-react";
import { NoticeKeys } from "./Utils/utils";
import RNToast from "./View/ShowToast";
import UserStore from "./Model/UserStore";

interface Props extends React.Props<any> {
  userStore: UserStore;
}

interface State {
  userName: string;
  passWord: string;
  scrollEnabled: boolean;
  loading: boolean;
}

const { width, height } = Dimensions.get("window");

@inject("userStore")
@observer
export default class Login extends React.Component<Props, State> {
  _userNameTxtField: any;
  _passWordTxtField: any;

  constructor(props: Props) {
    super(props);
    this.state = {
      userName: "",
      passWord: "",
      scrollEnabled: false,
      loading: false
    };
  }

  render() {
    return (
      <KeyboardAvoidingView
        behavior={"padding"}
        style={styles.container}
        keyboardVerticalOffset={Platform.OS === "ios" ? 0 : -10000}
      >
        <ScrollView
          style={styles.scrollViewContainer}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
          // scrollEnabled={this.state.scrollEnabled}
          scrollEnabled={false}
        >
          <Image
            source={require("../src/image/3.jpg")}
            style={styles.imageStyle}
          />
          <Input
            ref={(ref: any) => (this._userNameTxtField = ref)}
            containerStyle={[styles.inputContainerStyle, { marginTop: 50 }]}
            inputContainerStyle={styles.inputStyle}
            leftIcon={
              <Icon name="user-o" type="font-awesome" color="#666" size={24} />
            }
            placeholder={"请输入用户名"}
            inputStyle={{
              marginLeft: 10,
              marginRight: 10,
              color: "#333",
              fontSize: 16
            }}
            clearButtonMode="while-editing"
            onChangeText={(text: string) => this.setState({ userName: text })}
            returnKeyType="done"
            enablesReturnKeyAutomatically
            autoCorrect={false}
            autoCapitalize="none"
            onBlur={() => this.setState({ scrollEnabled: false })}
            onFocus={() => this.setState({ scrollEnabled: true })}
            // onSubmitEditing={}  点击软键盘提交后调用
          />
          <View style={styles.lineStyle} />
          <Input
            ref={(ref: any) => (this._passWordTxtField = ref)}
            containerStyle={styles.inputContainerStyle}
            inputContainerStyle={styles.inputStyle}
            leftIcon={
              <Icon name="key" type="font-awesome" color="#666" size={24} />
            }
            placeholder={"请输入密码"}
            inputStyle={{
              marginLeft: 10,
              marginRight: 10,
              color: "#333",
              fontSize: 16
            }}
            clearButtonMode="while-editing"
            secureTextEntry
            onChangeText={(text: string) => this.setState({ passWord: text })}
            returnKeyType="done"
            enablesReturnKeyAutomatically
            autoCorrect={false}
            autoCapitalize="none"
            onBlur={() => this.setState({ scrollEnabled: false })}
            onFocus={() => this.setState({ scrollEnabled: true })}
            // onSubmitEditing={}  点击软键盘提交后调用
          />
          <View style={styles.lineStyle} />
          <Button
            containerStyle={styles.buttonContainerStyle}
            buttonStyle={styles.buttonStyle}
            title="登 录"
            onPressIn={this._login}
            loading={this.state.loading}
          />
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }

  componentWillUnmount = () => {};

  _login = () => {
    if (this.state.userName.length <= 0 || this.state.passWord.length <= 0) {
      RNToast("请输入用户名或密码");
      return;
    }
    this.setState({
      loading: true
    });
    setTimeout(() => {
      this.props.userStore.isLogin = true;
      DeviceEventEmitter.emit(NoticeKeys.Notice_Key_Login_State, null);
    }, 3000);
  };

  _touchBackground = () => {
    this._userNameTxtField.blur();
    this._passWordTxtField.blur();
  };
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "transparent",
    flex: 1
  },
  scrollViewContainer: {
    backgroundColor: "white",
    flex: 1
  },
  imageStyle: {
    height: 100,
    width: 100,
    marginTop: height * 0.15,
    borderRadius: 50,
    alignSelf: "center"
  },
  inputContainerStyle: {
    marginTop: 20,
    alignSelf: "center"
  },
  inputStyle: {
    marginLeft: 20,
    marginRight: 20,
    borderBottomColor: "transparent",
    borderBottomWidth: 0.5
  },
  lineStyle: {
    height: 0.5,
    backgroundColor: "#CDCDCD",
    width: width - 70,
    alignSelf: "center"
  },
  buttonContainerStyle: {
    marginTop: 50,
    width: width - 70,
    height: 40,
    alignSelf: "center"
  },
  buttonStyle: {
    backgroundColor: "tomato",
    borderRadius: 4
  }
});
